<template>
  <el-dialog
    title="素材管理设置"
    :visible.sync="$attrs.visable"
    width="700px"
    :before-close="handleClose"
    append-to-body
  >
    <el-form :model="form" :rules="rules" ref="form">
      <div class="card-box bg_fff f-14 c_text mb-20">
        <div class="card-header flexbetween">
          <div class="card-title">
            <span class="fw-6 f-14 c_text2">手机上传</span>
            <span class="f-12 c_text3 pl-10"
              >启用后，在企业微信手机端，将素材发送给自己或特定群，直接保存到素材库</span
            >
          </div>
          <el-switch
            v-model="form.phoneSwitch"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </div>
        <div class="card-body p-12">
          <el-form-item label="上传后收录至:" class="mb-12 border-b">
            <el-radio-group v-model="form.resource">
              <el-radio :label="1">企业素材库</el-radio>
              <el-radio :label="2">个人素材库</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="card-item mb-12">
            收录方式一：发送给自己 <span class="c_primary commhover" @click="handleOpen">如何发送？</span>
          </div>
          <div class="card-item mb-12">
            收录方式二：
            <el-button size="small" @click="handleOpenGroup">
              <i class="el-icon-plus c_000"></i>
              选择收录群(0/5)
            </el-button>
          </div>
          <el-table class="commtable mb-12" :data="tableList">
            <el-table-column label="收录群组" prop="userName">
              <template slot-scope="scope">
                <div class="c_text2">{{ scope.row.clientUserName }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="自动打上素材标签	"
              prop="id"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="操作" width="100px">
              <!-- <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleEdit(scope.row)"
                  class="mr-10"
                  >修改</el-button
                >
              </template> -->
            </el-table-column>
          </el-table>
          <div class="card-info flex mb-12">
            <div class="mr-15"><i class="el-icon-warning c_primary f-18 mt-2"></i></div>
            <div class="f-14 c_text">
              <div>1、最多可配置5个收录群组，每个群组可选择1个或多个收录群（最多10个）；</div>
              <div>2、每个收录群组可设置1个或多个素材标签（最多10个，也可不设置），设置标签后，通过该群组中的群聊收录的素材会被自动打上对应素材标签；</div>
              <div>3、系统只接收外部群（即包含客户的群）的消息，建议创建专用素材群（群内发的所有内容都将收录素材库）。</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 自动清理 -->
      <div class="card-box bg_fff f-14 c_text">
        <div class="card-header flexbetween">
          <div class="card-title">
            <span class="fw-6 f-14 c_text2">自动清理</span>
            <span class="f-12 c_text3 pl-10">素材库满后，继续新建素材，自动永久删除更新时间最早的素材，不勾选则不能新建更多</span>
          </div>
        </div>
        <div class="card-body p-12">
          <el-form-item label="企业素材自动清理" class="mb-0 nolineh">
            <el-switch
              v-model="form.phoneSwitch"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span class="f-12 c_text3 pl-10">仅主账号可编辑，子账号只显示当前设置内容</span>
          </el-form-item>
          <el-form-item label="" class="mb-12 border-b">
            <el-checkbox v-model="checked">带 <i class="el-icon-star-on c_warning2 f-18"></i> 标记的素材，不自动清理</el-checkbox>
          </el-form-item>

          <el-form-item label="个人素材自动清理" class="mb-0 nolineh">
            <el-switch
              v-model="form.phoneSwitch"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span class="f-12 c_text3 pl-10">主账号及各个子账号自己设置</span>
          </el-form-item>
          <el-form-item label="" class="mb-12">
            <el-checkbox v-model="checked">带 <i class="el-icon-star-on c_warning2 f-18"></i> 标记的素材，不自动清理</el-checkbox>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>

    <el-dialog
      title="功能说明"
      :visible.sync="open"
      width="800px"
      :before-close="handleCloseOpen"
      append-to-body
    >
      <div class="flex gnimgbox">
        <img src="@/assets/images/sjdsa.png" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleCloseOpen">知道了</el-button>
      </span>
    </el-dialog>
    
    <SelectGroup v-if="groupopen" :visable='groupopen' @close='handleCloseGroup' />
  </el-dialog>
</template>

<script>
import SelectGroup from '@/components/UserGroupComp/SelectGroup.vue'
export default {
  data() {
    return {
      form: {
        phoneSwitch: 1,
        resource: 1,
      },
      rules: {},
      tableList: [],

      open:false,
      groupopen:false
    };
  },
  components:{
    SelectGroup
  },
  props: {},
  created() {},
  methods: {
    handleClose() {
      this.$emit("close", 1); //关闭弹窗;
    },

    handleSubmit() {
      if (!this.text) {
        this.$message.warning("输入不能为空");
        return;
      }
      this.$emit("submit", this.text);
    },

    handleOpen(){
      this.open = true
    },
    handleCloseOpen(){
      this.open = false
    },

    handleOpenGroup(){
      this.groupopen = true
    },

    handleCloseGroup(){
      this.groupopen = false
    }
  },
};
</script>
<style lang="scss" scoped>
.card-box {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding: 0;
}
.card-header {
  padding: 8px 12px;
  line-height: 22px;
}
.card-title {
  flex: 1 1;
}
.card-body {
  background-color: #f9f9f9;
}
.border-b {
  padding-bottom: 12px;
  border-bottom: 1px solid #e9e9e9;
}
.card-item {
  line-height: 32px;
}
::v-deep .el-table th {
  background-color: #f5f5f5;
}
.card-info {
  background-color: #f0f7ff;
  border: 1px solid #abceff;
  padding: 15px 15px 15px 24px;
  border-radius: 4px;
}
::v-deep .nolineh .el-form-item--medium .el-form-item__content{
  line-height: 26px;
}
::v-deep .nolineh .el-form-item__label{
  color: rgba(0,0,0,.65);
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label{
  color: rgba(0,0,0,.65);
}
.gnimgbox{
  img{
    width: 100%;
  }
}
</style>